<template>
  <view class="container" id="container">
    <view class="home-header">
      <view class="header-left">
        <image :src="userInfo.avatarUrl" alt="头像"></image>
      </view>
      <view class="header-right">
        <h3>{{ userInfo.nickName }}</h3>
        <span>{{ '普通用户' }}</span>
      </view>
      <view class="header-exchange">
        欢迎您!☺☺☺
      </view>
    </view>
    <view class="home-content">
        <van-panel title="用户名" :status="userInfo.nickName">
        </van-panel>
        <van-panel title="微信号" :status="'-'">
        </van-panel>
        <van-panel title="性别" :status="userInfo.gender === 0 ? '男' : '女'">
        </van-panel>
        <van-panel title="所属公司" :status="userInfo.companyName">
        </van-panel>
        <van-panel title="所属电子文件夹" :status="userInfo.folderName">
        </van-panel>
        <van-panel title="登录时间" :status="formatDateOne(userInfo.updatedAt)">
        </van-panel>
        <van-panel title="入职时间" :status="formatDateOne(userInfo.createdAt)">
        </van-panel>
    </view>
<!--    <view class="button-area" style="text-align: center;">
      <van-button type="info" @click="editPersonal">编辑个人信息</van-button>
    </view>-->
  </view>
</template>

<script>
import { mapState } from 'vuex';
import {reqUserInfo} from "../../api/user";
import {USER_INFO} from "../../store/mutation-types";
export default {
  data() {
    return {
      title: '这是首页'
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted () {
    this.getUserInfo()
  },
  onLoad() {
  },
  methods: {
    async getUserInfo () {
      const result = await reqUserInfo({
        id: this.$store.state.user.userInfo.id
      })
      const data = result.data;

      this.$store.commit(USER_INFO, data.messageBody);
    },
    formatDateOne (time) {
      return this.formatDate(time);
    },
    toPrimary () {
      uni.navigateTo({
        url: '/pages/user/user'
      })
    },
    toFiles () {
      uni.navigateTo({
        url: '/pages/files/files'
      })
    },
    toMessage () {
      uni.navigateTo({
        url: '/pages/messageList/messageList'
      })
    },
    toCompany () {
      uni.navigateTo({
        url: '/pages/company/companyList'
      })
    },
    editPersonal () {
      uni.navigateTo({
        url: '/pages/userAdd/userAdd?personal=true'
      })
    }
  }
}
</script>

<style lang="less">
/**index.wxss**/
#container {
  background: #F4F4F8;
  min-height: 100vh;
  .each-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30upx;
    background: #ffffff;
    border-radius: 10%;
    margin: 10upx 0;
    image{
      flex: 1;
      width: 100upx;
      height: 100upx;
    }
    text{
      flex: 1;
      font-size: 30upx;
      margin-top: 20upx;
    }
  }
}
#container .home-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem 1rem 2.2rem 1rem;
  background: #0E9CED;
  color: #FFFFFF;
}
#container .home-header .van-button{
  width: auto !important;
  font-weight: normal;
}
#container .home-header .header-left image {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}
#container .home-header .header-right {
  text-align: left;
  padding-left: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#container .home-header .header-right h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
#container .home-header .header-right span {
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
#container .header-exchange {
  flex: 1;
  text-align: right;
  font-size: 32rpx;
}
#container .header-exchange .van-button{
  background: transparent;
  color: #ffffff;
  border: none;
}
#container .home-content {
  padding: 50rpx 30upx;
  background: #F4F4F8;
  border-radius: 20px 20px 0 0;
  margin-top: -50upx;
}
#container .home-content .home-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#container .home-content .van-button{
  margin: 50rpx 0;
}
#container .home-content button{
  width: 450rpx;
}

.usermotto {
  margin-top: 200px;
}
.to-home{
  margin-top: 40rpx;
}
.login-panel{
  display: flex;
  flex-direction: row;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 200rpx;
}
.login-panel span{
  margin-left: 20rpx;
}
.overlay{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.task-empty{
  background: #ffffff;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.task-empty image{
  width: 320rpx;
  height: 320rpx;
}
.task-empty text{
  margin-top: 16px;
  padding: 0 60px;
  color: #969799;
  font-size: 14px;
  line-height: 20px;
}
</style>
